<script setup>
import { h, onMounted, ref, resolveDirective, withDirectives } from 'vue'
import {
  NButton,
  NCheckbox,
  NInput,
  NTag,
  useMessage,
  NFlex,
  NAvatar, NSelect, NInputNumber, NImage, NTreeSelect, NForm, NFormItem, NUpload
} from 'naive-ui'
import api from '@/api'
import default_image from "@/assets/images/mz.jpg"
import TheIcon from "@/components/icon/TheIcon.vue";
import {useCRUD} from "@/composables";
import CrudModal from "@/components/table/CrudModal.vue";
import {getToken} from "@/utils";

const {
  modalVisible,
  modalTitle,
  modalAction,
  modalLoading,
  handleSave,
  modalForm,
  modalFormRef,
  handleEdit,
  handleDelete,
  handleAdd,
} = useCRUD({
  name: '回访管理',
  initForm: {},
  doCreate: api.createCustomerVisit,
  doUpdate: api.updateCustomerVisit,
  doDelete: api.deleteCustomerVisit,
  refresh: () => get_visits(),
})

const $table = ref(null)
const queryItems = ref({})
const vPermission = resolveDirective('permission')
const base_path = import.meta.env.VITE_BASE
const message = useMessage()

const data = reactive({
  uploadAction: base_path + 'api/customer/visit/file',
  token: getToken(),
  customers:[],
  search_customer:'',
  visits:[],
  search_goods:'',
  select_customer:{
    id:0,
    name:"暂未选择",
    phone:"x",
    money_deposit:0
  },
  select_skus:[],
  select_price:0,
  select_goods:[],
  select_goods_nums:[],
  yue:0,
  coupons:[],
  select_coupons:[],
  select_space:1,
  desc:"",
  is_deposit:0,
  show_info:false,
});

function get_customers(){
  api.getSaasUserList({
    name:data.search_customer
  }).then((res) => {
    data.customers = res.data
    select_customer(res.data[0])
  })
}

onMounted(() => {
  api.getSpaceList().then((res) => (data.option_space = res.data))
  get_customers()
})

//图文信息


const handleFinish = ({ file, event }) => {
  let data = (event?.target).response
  data = JSON.parse(data)
  if (data.code === 200) {
    file.url = data.data.url
    message.success('上传成功')
  } else {
    message.error(data.data)
  }

  return file
}

function select_customer(item){
  data.select_customer = item
  message.success('已选择客户:'+item.name)
  get_visits()
}

function get_visits(){
  api.getCustomerVisit({
    customer_id:data.select_customer.id
  }).then((res) => (data.visits = res.data))
}

function add_visit() {
  modalForm.value.customer_id = data.select_customer.id
  handleSave()
}
</script>

<template>
  <AppPage :show-footer="false" style="padding-top: 60px;">
    <n-grid :cols="3" :x-gap="12" :y-gap="8">
      <n-gi>
        <n-card  style="height: calc(100vh - 100px);"  content-style="padding: 0px;"   title="客户选择" size="small" :segmented="{
          content: true,
          footer: 'soft',
        }" >
          <div style="margin:20px">
            <NInput v-model:value="data.search_customer" size="large" clearable type="text" placeholder="请输入姓名/手机号"
                    @keyup="get_customers()" />
          </div>
          <n-scrollbar style="max-height: calc(100vh - 230px);padding:0 20px 20px 20px">
            <n-card embedded  v-for="item in data.customers" class="customer_card" hover:card-shadow   size="small" :segmented="{
                    content: true,
                    footer: 'soft',
                  }"
                    @click="select_customer(item)"
            >
              <template #header>
                <div style="display: flex; align-items: center;" @click="show_info(item)">
                  <NAvatar :src="item.avatar" :fallbackSrc="default_image" style="width: 30px; height: 30px; margin-right: 10px;border-radius: 50%" />
                  <span>{{ item.name }}</span>
                </div>
              </template>
              <template #header-extra>
                <NTag type="error" v-if="item===data.select_customer">已选择</NTag>&nbsp;
                <NTag >{{item.role_name}}</NTag>

              </template>
              <template #footer>
                <span color="#ef504e"></span>
                <n-flex justify="space-between" size="large">
                  <div>卡号: <span>{{item.card_no}}</span> </div>
                  <div>电话: <span>{{item.phone}}</span></div>
                </n-flex>
              </template>
            </n-card>
          </n-scrollbar>
        </n-card>
      </n-gi>
      <n-gi span="2">
        <n-card   style="height: calc(100vh - 100px);" content-style="padding: 0px;"  :title="data.select_customer.name+'回访记录'"  size="small" :segmented="{
          content: true,
          footer: 'soft',
        }">
          <template #header-extra>
            <NButton  type="primary" @click="handleAdd" size="small">
              <TheIcon icon="material-symbols:add" :size="18" class="mr-5" />新建回访
            </NButton>
          </template>

          <n-scrollbar style="max-height: calc(100vh - 150px);padding:0 20px 20px 20px" v-if="data.visits.length>0">
            <n-card embedded  v-for="item in data.visits" class="customer_card" hover:card-shadow   size="small" :segmented="{
                    content: true,
                    footer: 'soft',
                  }"
            >
              <template #header>
                <div style="display: flex; align-items: center;" >
                  <span style="color: #6a6a6a">{{item.created_at}}</span>
                </div>
              </template>
              <template #header-extra>
                <NTag type="primary">回访人:{{item.add_uname}}</NTag>
              </template>
              <div>
                {{item.remark}}
              </div>
              <div style="margin-top: 10px">
                <n-image-group :theme-overrides="imageGroupThemeOverrides">
                  <n-space>
                    <n-image v-for="image_item in item.remark_images" style="border-radius: 2px" width="50" height="100" :src="image_item.url"/>
                  </n-space>
                </n-image-group>
              </div>
            </n-card>
          </n-scrollbar>
          <div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center" v-else>
            <n-empty description="暂无回访数据" ></n-empty>
          </div>
        </n-card>
      </n-gi>
    </n-grid>
    <!-- 新增/编辑 弹窗 -->
        <CrudModal v-model:visible="modalVisible" :title="modalTitle" :loading="modalLoading" @save="add_visit()">
          <NForm ref="modalFormRef" label-placement="left" label-align="left" :label-width="80"
                 :model="modalForm" :rules="validateAddUser">

              <NFormItem label="回访内容" path="remark">
                <NInput style="width: 590px;" type="textarea" v-model:value="modalForm.remark" clearable
                        placeholder="请输入回访内容"/>
              </NFormItem>

              <NFormItem label="详情图" path="remark_images" style="width: 100%">
              <NUpload :action="data.uploadAction" :headers="{ token: data.token }" multiple list-type="image-card"
                @finish="handleFinish" v-model:file-list="modalForm.remark_images">
              </NUpload>
            </NFormItem>

          </NForm>
        </CrudModal>
  </AppPage>

</template>

<style>
.customer_card{
  margin: 10px 0;
}
</style>
